<template>
  <!-- This footer should be hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      >剩余<strong>{{ remainder }}</strong></span
    >
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a class="selected" @click="$emit('all')" href="#/">全部任务</a>
      </li>
      <li>
        <a href="#/active" @click="$emit('loading')">进行中</a>
      </li>
      <li>
        <a href="#/completed" @click="$emit('end')">已完成</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="$emit('delEnd')">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["remainder"],
};
</script>

<style>
</style>